<template>
  <Card 
    :hover="true" 
    class="cursor-pointer"
    @click="handleClick"
  >
    <!-- 资源头部 -->
    <div class="flex items-start justify-between mb-4">
      <div class="flex items-center space-x-3">
        <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold text-gray-900">{{ resource.title }}</h3>
          <p class="text-sm text-gray-600">{{ resource.category || '学习资源' }}</p>
        </div>
      </div>
      
      <!-- 删除按钮 -->
      <button 
        class="text-sm text-gray-400 hover:text-red-500 transition-colors duration-200"
        @click.stop="handleRemove"
      >
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
        </svg>
      </button>
    </div>
    
    <!-- 资源描述 -->
    <div class="mb-4">
      <p class="text-sm text-gray-600 line-clamp-2">{{ resource.description || '暂无描述' }}</p>
    </div>
    
    <!-- 资源标签 -->
    <div class="mb-4">
      <div class="flex flex-wrap gap-2">
        <Badge 
          v-for="tag in (resource.tags || []).slice(0, 3)"
          :key="tag"
          variant="info"
          size="sm"
        >
          {{ tag }}
        </Badge>
        <Badge 
          v-if="resource.tags && resource.tags.length > 3"
          variant="default"
          size="sm"
        >
          +{{ resource.tags.length - 3 }}
        </Badge>
      </div>
    </div>
    
    <!-- 资源信息 -->
    <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
      <div class="flex items-center space-x-4">
        <span v-if="resource.download_count">
          <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
          </svg>
          {{ resource.download_count }} 次下载
        </span>
        <span v-if="resource.file_size">
          <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
          </svg>
          {{ formatFileSize(resource.file_size) }}
        </span>
      </div>
      <span>{{ formatDate(resource.created_at) }}</span>
    </div>
    
    <!-- 操作按钮 -->
    <div class="flex justify-end">
      <Button 
        variant="primary"
        size="sm"
        @click.stop="handleClick"
      >
        查看资源
      </Button>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import Card from '@/components/ui/Card.vue'
import Button from '@/components/ui/Button.vue'
import Badge from '@/components/ui/Badge.vue'

interface Props {
  resource: {
    id: number
    title: string
    description?: string
    category?: string
    tags?: string[]
    download_count?: number
    file_size?: number
    created_at: string
  }
}

const props = defineProps<Props>()

const emit = defineEmits<{
  remove: [resourceId: number]
}>()

const router = useRouter()

const handleClick = () => {
  router.push(`/resources/${props.resource.id}`)
}

const handleRemove = () => {
  if (confirm(`确定要取消收藏 "${props.resource.title}" 吗？`)) {
    emit('remove', props.resource.id)
  }
}

const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
</script>
